import '../../util/_base_export.dart';
import '../../util/_view_export.dart';
import '../../blocs/product.dart';
import '../../blocs/cart.dart';

import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:flutter/widgets.dart';

class ProductDetailPage extends StatefulWidget {
  final int prod_id;
  const ProductDetailPage(this.prod_id, {Key? key}) : super(key: key);
  @override
  _ProductDetailPageState createState() => _ProductDetailPageState();
}

class _ProductDetailPageState extends State<ProductDetailPage> {
  @override
  initState() {
    super.initState();
    Provider.of<ProductBloc>(context, listen: false).fetchDetail(widget.prod_id);
  }

  GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>();
  ValueChanged _onChanged = (val) => print(val);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            width: ScreenUtil().screenWidth,
            child: Consumer2<ProductBloc, CartBloc>(
              builder: (context, _productDetail, _cart, child) => Builder(
                builder: (context) {
                  print(_fbKey);

                  List<Widget> ll_images = [];
                  _productDetail.product_detail['detail_images']
                      ?.forEach((element) => ll_images.add(Container(
                            alignment: Alignment.topCenter,
                            padding: EdgeInsets.only(
                              top: 20.w,
                            ),
                            child: CachedNetworkImage(
                              imageUrl: element,
                              fit: BoxFit.cover,
                            ),
                          )));
                  return (_productDetail.product_detail.isEmpty)
                      ? Container()
                      : Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              height: 300.h,
                              alignment: Alignment.topLeft,
                              padding: EdgeInsets.only(
                                left: 20.h,
                                top: 20.w,
                              ),
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                  fit: BoxFit.cover,
                                  image: CachedNetworkImageProvider(
                                    _productDetail.product_detail['image_url'],
                                  ),
                                ),
                              ),
                              child: GestureDetector(
                                onTap: () {
                                  Navigator.pop(context);
                                  _productDetail.clearProd();
                                },
                                child: Image.asset('assets/main/btn_close.png'),
                                // Icon(MaterialCommunityIcons.close, color: Colors.black, size: 28),
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.only(
                                left: 20.w,
                                right: 20.w,
                                top: 27.h,
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    _productDetail.product_detail['sku_name'],
                                    textAlign: TextAlign.left,
                                    softWrap: true,
                                    overflow: TextOverflow.ellipsis,
                                    style: TextStyle(
                                      color: AppColor.nameProduct,
                                      fontWeight: FontWeight.w400,
                                      fontSize: 18.sp,
                                    ),
                                  ),
                                  SizedBox(height: 5.h),
                                  Text(
                                    '\$ ' +
                                        _productDetail.product_detail['sku_price'] +
                                        '  /  ' +
                                        _productDetail.product_detail['unit_desc'],
                                    textAlign: TextAlign.left,
                                    softWrap: true,
                                    overflow: TextOverflow.ellipsis,
                                    style: TextStyle(
                                      color: AppColor.priceProduct,
                                      fontWeight: FontWeight.w400,
                                      fontSize: 18.sp,
                                    ),
                                  ),
                                  SizedBox(height: 10.h),
                                  HtmlWidget(
                                    _productDetail.product_detail['sku_desc'],
                                    // bodyPadding: EdgeInsets.symmetric(vertical: 10.h),
                                    // tableCellPadding: EdgeInsets.all(0),
                                    webView: true,
                                    webViewJs: true,
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              margin: EdgeInsets.symmetric(
                                vertical: 10.h,
                              ),
                              child: Divider(
                                height: 1,
                                color: Colors.grey,
                                indent: 30,
                                endIndent: 30,
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.only(top: 20.w),
                              height: 60.h,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  GestureDetector(
                                    onTap: () {
                                      _cart.reduceItem(widget.prod_id);
                                    },
                                    child: Padding(
                                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                                      child: Icon(
                                        // MaterialCommunityIcons.minus_circle_outline,
                                        LineIcons.minusCircle,
                                        color: AppColor.nameProduct,
                                        size: 32,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    width: 48.w,
                                    alignment: Alignment.center,
                                    child: Text(
                                      _cart
                                          .itemAmount(_productDetail.product_detail['sku_id'])
                                          .toString(),
                                      style: TextStyle(
                                        color: AppColor.priceProduct,
                                        fontWeight: FontWeight.normal,
                                        fontSize: 28.sp,
                                      ),
                                    ),
                                  ),
                                  GestureDetector(
                                    onTap: () {
                                      _cart.addItem(_productDetail.product_detail);
                                    },
                                    child: Padding(
                                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                                      child: Icon(
                                        // MaterialCommunityIcons.plus_circle,
                                        LineIcons.plusCircle,
                                        color: AppColor.nameProduct,
                                        size: 32,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),

                            if (ll_images.isNotEmpty) Column(children: ll_images),
                            // Container(
                            //   child: ListView.builder(
                            //       shrinkWrap: true,
                            //       itemCount:
                            //           (_productDetail.product_detail['detail_images'] ?? []).length,
                            //       itemBuilder: (BuildContext context, int index) {
                            //         var _item =
                            //             _productDetail.product_detail['detail_images'][index];
                            //         print(_item);
                            //         return Container(
                            //           alignment: Alignment.topCenter,
                            //           padding: EdgeInsets.only(
                            //             top: 20.w,
                            //           ),
                            //           child: CachedNetworkImage(
                            //             imageUrl: _item,
                            //             fit: BoxFit.cover,
                            //           ),
                            //         );
                            //       }),
                            // )
                          ],
                        );
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}
